<template>
	<view class="user">
		<view v-if="$store.getters.token || userInfo.uid">
			<view class="header acea-row row-between-wrapper ">
				<!-- bg-color-red -->
				<view class="picTxt acea-row row-between-wrapper" style="margin-top: 24rpx;">
					<view class="pictrue" v-if="avatar !=''">
						<img :src="avatar" alt="">
					</view>
					<view class="pictrue" v-else>
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view class="text">
						<view class="acea-row row-middle" style="color: #fff;">
							<view class="name line1"><open-data type="userNickName"></open-data></view>
							<!-- <span class="sqrz">({{ userData.levelName == '' ? '社会群体' : userData.levelName }})</span>
							<view class="sqrz" @click="goCertification()" style="color: #fff;margin-left: 16rpx;">申请认证</view> -->
						</view>
						<view @click="goPersonalData()" class="id" v-if="userInfo.phone">
						
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="binding" v-else><text>绑定手机号</text></button>
						<!-- #endif -->

						<!-- #ifndef MP-WEIXIN -->
						<button class="binding" @click="goBindPhone()" v-else><text>绑定手机号</text></button>
						<!-- #endif -->
					</view>  

				</view>
				<!-- <text class="iconfont icon-shezhi" @click="goPersonalData()"></text> -->
			</view>

			<view class="wrapper">
				<view class="myOrder">
					<!-- <view class="title acea-row row-between-wrapper">
						<text>我的订单</text>
						<text @click="goMyOrder()" class="allOrder">
							<text>全部订单</text>
							<text class="iconfont icon-jiantou"></text>
						</text>
					</view> -->
					<!-- <view class="orderState acea-row row-middle">
						<view @click="goMyOrder(0)" class="item">
							<view class="pictrue">
								<image src="http://mall-image.hxyrfwpt.com/static/images/dfk.png" />
								<text class="order-status-num" v-if="userInfo.orderStatusNum.unpaidCount > 0">{{ userInfo.orderStatusNum.unpaidCount }}</text>
							</view>
							<view>待付款</view>
						</view>
						<view @click="goMyOrder(1)" class="item">
							<view class="pictrue">
								<image src="http://mall-image.hxyrfwpt.com/static/images/dfh.png" />
								<text class="order-status-num" v-if="userInfo.orderStatusNum.unshippedCount > 0">{{ userInfo.orderStatusNum.unshippedCount }}</text>
							</view>
							<view>待发货</view>
						</view>
						<view @click="goMyOrder(2)" class="item">
							<view class="pictrue">
								<image src="http://mall-image.hxyrfwpt.com/static/images/dsh.png" />
								<text class="order-status-num" v-if="userInfo.orderStatusNum.receivedCount > 0">{{ userInfo.orderStatusNum.receivedCount }}</text>
							</view>
							<text>待收货</text>
						</view>
						<view @click="goMyOrder(3)" class="item">
							<view class="pictrue">
								<image src="http://mall-image.hxyrfwpt.com/static/images/dpj.png" />
								<text class="order-status-num" v-if="userInfo.orderStatusNum.evaluatedCount > 0">{{ userInfo.orderStatusNum.evaluatedCount }}</text>
							</view>
							<text>待评价</text>
						</view>
						<view @click="goReturnList()" class="item">
							<view class="pictrue">
								<image src="http://mall-image.hxyrfwpt.com/static/images/sh.png" />
								<text class="order-status-num" v-if="userInfo.orderStatusNum.refundCount > 0">{{ userInfo.orderStatusNum.refundCount }}</text>
							</view>
							<text>售后/退款</text>
						</view>
					</view> -->
				</view>
				<!--商家入驻申请图start-->

				<!-- <image src="http://mall-image.hxyrfwpt.com/static/images/ruzhu_banner.png" class="ruzhu-pictrue" @click="goMerchantRuzhu()"></image> -->
				<!-- <image src="http://image.zjyph.cn/file/pic/20220830150252721920.png" class="ruzhu-pictrue"></image> -->

				<!--商家入驻申请图end-->

				<view class="myService" style="padding-bottom: 100rpx;">
					<view class="serviceList acea-row row-middle">
						
						<template v-for="(item, MyMenusIndex) in MyMenus">
							<view class="item" :key="MyMenusIndex" @click="goPages(MyMenusIndex)">
								<view class="pictrue"><image :src="item.pic" /></view>
								<view class="cell">{{ item.name }}</view>
								<text class="iconfont icon-jiantou"></text>
							</view>
						</template>


					
					</view>
				</view>
			</view>
		</view>
		<Authorization v-else />
	</view>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import { getUserInfo, getMenuUser, bindingPhone, getUserLeveStats } from '@/api/user';
import { isWeixin } from '@/utils';
import { VUE_APP_RESOURCES_URL } from '@/config';
import cookie from '@/utils/store/cookie';
import SwitchWindow from '@/components/SwitchWindow';
import Authorization from '@/pages/authorization/index';
import { ruzhuDetail } from '@/api/shanghu';
import localStorage from '@/utils/index.js';
import { getLogout } from '@/api/user';
const NAME = 'User';

export default {
	name: NAME,
	components: {
		SwitchWindow,
		Authorization
	},
	props: {},
	data: function() {
		return {
			userData: '',
			MyMenus: [],
			switchActive: false,
			isWeixin: false,
			RESOURCES_URL: VUE_APP_RESOURCES_URL,
			avatar:""
		};
	},
	created() {
		//会员信息
		getUserInfo().then(res => {
			// console.log(JSON.stringify(res))
			if (res.status == 200) {
				this.userData = res.data;
			} else {
				this.$msg.error('获取数据失败,请重试');
			}
		});
		this.avatar = this.userInfo.avatar
	},
	computed: mapGetters(['userInfo']),
	methods: {
		// getUserProfile(){
		// 	uni.getUserProfile({
		// 		desc:'用于完善用户信息',
		// 		success(res) {
		// 			console.log(res)
		// 		}
		// 	})
		// },
		goChangePasswords(){
		  // this.$yrouter.push({path:"/pages/user/ChangePassword/index"});
		 // this.$yrouter.push('/pages/user/ChangePassword/index');
		 this.$yrouter.push('/pages/user/amendPassword/amendPassword');
		},
		viewRuZhuNews(){ //查看入驻协议
			this.$yrouter.push({
				path: '/pages/shop/news/NewsDetail/index?id=1'
			});
		},
		...mapMutations(['updateAuthorizationPage']),
		goReturnList() {
			this.$yrouter.push('/pages/order/ReturnList/index');
		},
		goMyOrder(type) {
			// sessionStorage.setItem("type", type);
			this.$yrouter.push({
				path: '/pages/order/MyOrder/index',
				query: {
					type
				}
			});

			// this.$yrouter.push({
			//   path: "/pages/order/MyOrder/givingOrderList",
			//   query: {
			//     type
			//   }
			// });
		},
		goBindPhone() {
			this.$yrouter.push({
				path: '/pages/user/BindingPhone/index'
			});
		},
		goUserCoupon() {
			this.$yrouter.push('/pages/user/coupon/UserCoupon/index');
		},
		goIntegral() {
			uni.setStorageSync('nowMoney',this.userInfo.nowMoney)
			this.$yrouter.push('/pages/user/signIn/Integral/index');
		},
		goUserPromotion() {
			this.$yrouter.push('/pages/user/promotion/UserPromotion/index');
		},
		goUserAccount() {
			
			this.$yrouter.push({
				path: '/pages/coinCertificate/coinCertificate'
			});
		},
		goPersonalData() {
			this.$yrouter.push('/pages/user/PersonalData/index');
		},
		logout: function() {
			uni.showModal({
				title: '提示',
				content: '确认退出登录?',
				success: res => {
					if (res.confirm) {
						getLogout()
							.then(res => {
								this.$store.commit('logout');
								this.$yrouter.replace({
									path: '/pages/authorization/index',

									query: {}
								});
							})
							.catch(err => {});
					} else if (res.cancel) {
						// console.log("用户点击取消");
					}
				}
			});
		},
		// //申请认证
		goCertification() {
			getUserLeveStats().then(res => {
				// alert(JSON.stringfy(res.data));
				if (res.data == null) {
					this.$yrouter.push('/pages/Certification/Certification');
				} else if (res.data && res.data.apply == -1) {
					this.$yrouter.push('/pages/Certification/Certification');
		 } else {
					uni.showToast({
						title: '您已经申请过，请等待审核!',
						icon: 'none'
					});
				}
			});
		},

		goMerchantRuzhu() {
			//进入入驻界面
			//校验该用户是否已经提交入驻申请
			ruzhuDetail().then(res => {
				//	alert(JSON.stringify(res.data));

				if (res.data && res.data.id) {
					var statusText = res.data.status;
					//	alert("statusText=="+statusText);
					var failMessage = res.data.failMessage;

					uni.setStorageSync('statusText', statusText);
					uni.setStorageSync('failMessage', failMessage);

					this.$yrouter.push({
						path: '/pagesMer/shanghu/merchantRuzhuResult',
						query: {
							merId: res.data.id //商户ID
						}
					});
				} else {
					this.$yrouter.push({
						path: '/pagesMer/shanghu/merchantRuzhu'
					});
				}
			});
		},
		getPhoneNumber: function(e) {
			let thit = this;
			// 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
			if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
				uni.showLoading({
					title: '绑定中'
				});
				bindingPhone({
					encryptedData: e.mp.detail.encryptedData,
					iv: e.mp.detail.iv
				})
					.then(res => {
						// this.User();
						thit.$store.dispatch('userInfo', true);
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						});
					})
					.catch(error => {
						uni.hideLoading();
						thit.$store.dispatch('userInfo', true);
						console.log(error);
						uni.showToast({
							title: error.msg || error.response.data.msg || error.response.data.message,
							icon: 'none',
							duration: 2000
						});
					});
			
			} else {
				uni.showToast({
					title: '已拒绝授权',
					icon: 'none',
					duration: 2000
				});
			}
		},
		changeswitch: function(data) {
			this.switchActive = data;
		},
		MenuUser: function() {
			let that = this;
			getMenuUser()
				.then(res => {
					uni.hideLoading();
					that.MyMenus = res.data.routine_my_menus;
				})
				.catch(error => {
					uni.hideLoading();
					console.log(error);
				});
		},
		goPages: function(index) {
			let url = this.MyMenus[index].uniapp_url;
			if (url === '/pages/user/promotion/UserPromotion/index' && this.userInfo.statu === 1) {
				if (!this.userInfo.isPromoter) {
					uni.showToast({
						title: '您还没有推广权限！！',
						icon: 'none',
						duration: 2000
					});
					return;
				}
			}

			if (url === '/pagesMer/orderAdmin/OrderIndex/index' && !this.userInfo.adminid && !this.userInfo.merId > 0) {
				uni.showToast({
					title: '您还不是管理员！！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			console.log(this.userInfo);
			if (url === '/pagesMer/orderAdmin/OrderCancellation/index' && !this.userInfo.checkStatus && !this.userInfo.merId > 0) {
				uni.showToast({
					title: '您没有核销权限,请后台店员设置！！',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			this.$yrouter.push({
				path: this.MyMenus[index].uniapp_url
			});
		},
		goPages2: function() {
			this.$yrouter.push({
				path: '/pagesMer/orderAdmin/OrderCancellation/index'
			});
		}
	},
	watch: {
		userInfo() {
			this.MenuUser();
		}
	},
	onShow() {
		if (this.$store.getters.token) {
			//
			uni.showLoading({
				title: '加载中'
			});
			this.$store.dispatch('getUser', true);
			this.MenuUser();
			this.isWeixin = isWeixin();
		}
	},
	onHide() {
		console.log('离开用户中心');
		this.updateAuthorizationPage(false);
	}
};
</script>

<style lang="less">
	.cell button::after{
		border: 0;
	}
.footer-line-height {
	height: 1 * 100rpx;
}
.user {
	background-color: #fff;
}
.header.acea-row.row-between-wrapper {
	background-color: #f9690a;
}

// .title.acea-row.row-between-wrapper {
// 	background-color: #AEC5B5;
// 	border-radius: 20rpx;
// }

.orderState.acea-row.row-middle {
	background-color: #fff;
	border-radius: 20rpx;
}
.serviceList.acea-row.row-middle {
	background-color: #fff;
	border-radius: 20rpx;
}

.order-status-num {
	// min-width: 0.33 * 100rpx;
	min-width: 0.16 * 100rpx;
	background-color: #eb3729;
	color: #333;
	border-radius: 20rpx;
	position: absolute;
	right: -0.14 * 100rpx;
	top: -0.15 * 100rpx;
	font-size: 0.2 * 100rpx;
	padding: 0 0.08 * 100rpx;
	border: 1px solid #eee;
}

.pictrue {
	position: relative;
}

.switch-h5 {
	margin-left: 0.2 * 100rpx;
}

.binding {
	margin-top: 0.1 * 100rpx;
	display: inline-block;
	padding: 0.05 * 100rpx 0.2 * 100rpx;
	background-color: #ca1f10;
	border-radius: 20rpx;
	font-size: 0.22 * 100rpx;
	line-height: 1.5;
	border: 1px solid #e8695e;
	color: #333;
}

.by {
	text-align: center;
	padding: 30rpx 0;
}

.by-text {
	text-align: center;
	font-size: 24rpx;
}
.sqrz {
	color: #333;
	font-size: 12px;
	padding: 6rpx;
}

.ruzhu-pictrue {
	width: 100%;
	height: 260upx;
	border-radius: 20rpx;
}
</style>
